<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        position: relative;
        height: 100vh;
         background-color: orange;
         overflow: hidden;
    }
   
    .rt1 {
        position: absolute;
        left: -100px;
        bottom: -100px;
        transition: all 1s;
    }

   
    body:hover .rocket1 {
        transform: translate(250px,-100px) rotate(45deg);
    }
     body:hover .rocket2 {
        transform: translate(170px,-170px) rotate(35deg);
    }
     body:hover .rocket3 {
        transform: translate(320px,-30px) rotate(55deg);
    }
    body:hover .rocket4 {
        transform: translate(550px,-400px) rotate(90deg);
    }
    body:hover .rocket5 {
        transform: translate(470px,-470px) rotate(90deg); 
    } 
     body:hover .rocket6 {
        transform: translate(620px,-330px) rotate(90deg);
    }

    body:hover .rocket7 {
        transform: translate(0px,-700px) rotate(100000deg);
    }
    body:hover .rocket8 {
        transform: translate(0px,-700px) rotate(100000deg);
    }
    .rt01 {
        position: absolute;
        left: 1500px;
        bottom: -100px;
        transition: all 30s cubic-bezier(.21,.5,0,1.07);
    } 
    .rt02 {
        position: absolute;
        left: 1700px;
        bottom: -100px;
        transition: all 30s cubic-bezier(.89,.08,.3,.72);
    }



    .rt2 {
        position: absolute;
        left: 370px;
        top: 380px;
        transform: rotate(90deg);
        transition: 30s  ;
    }
     .rt3 {
        position: absolute;
        left: 450px;
        top: 450px;
        transform: rotate(90deg);
        transition: 30s ;
    }
    .rt4 {
        position: absolute;
        left: 520px;
        top: 520px;
        transform: rotate(90deg);
        transition: 30s ;
    }

    body:hover .rt2 {
        transform: translate(900px,500px) ;
    }
    body:hover .rt3 {
        transform: translate(950px,430px) ;
    }
    body:hover .rt4 {
        transform: translate(1000px,360px) ;
    }

</style>
<body>
        
        <img src="../img/rocket.png" alt="" class="rt1  rocket1">
        <img src="../img/rocket.png" alt="" class="rt1   rocket2">
        <img src="../img/rocket.png" alt="" class="rt1   rocket3">
        <img src="../img/rocket.png" alt="" class="rt1   rocket4">
        <img src="../img/rocket.png" alt="" class="rt1   rocket5">
        <img src="../img/rocket.png" alt="" class="rt1   rocket6">
        <img src="../img/rocket.png" alt="" class="rt01   rocket7">
        <img src="../img/rocket.png" alt="" class="rt02   rocket8">

        <img src="../img/rocket.png" alt="" class="rt2   rocket-1">
        <img src="../img/rocket.png" alt="" class="rt3   rocket-1">
        <img src="../img/rocket.png" alt="" class="rt4   rocket-1">


    
</body>
</html>